<template>
<!-- <router-view></router-view> -->
<!-- 过度动效 -->
<router-view v-slot="{ Component }">
  <transition name="slide-fade">
    <component :is="Component" />
  </transition>
</router-view>
</template>
<style scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease;
}

.slide-fade-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.slide-fade-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* 全局平滑效果 */
html {
  scroll-behavior: smooth;
}

/* 全局链接和按钮过渡效果 */
a, 
button,
.el-button,
[class*="user-link"],
[class*="btn"],
.user-avatar,
.user-face {
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

/* 点击波纹效果 */
a:active,
button:active,
.el-button:active,
[class*="user-link"]:active,
[class*="btn"]:active {
  transform: scale(0.95);
}

/* 确保所有交互元素有过渡效果 */
* {
  transition-timing-function: ease-out;
}

/* 内容区域的过渡 */
.container,
.page-container,
.content-wrapper {
  transition: all 0.3s ease-in-out;
}
</style>